<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
	<style type="text/css">
		*{
			padding: 0;
			margin: 0;
		}
		ul{
			width: 550px;
			margin: 20px auto;
/*			background: pink;*/
		}
		li{
			list-style: none;
		}
		ul li + li span{
			background: gray;
			float: left;
			width: 200px;
			height: 50px;
		}
		.caozuo , .del{
			width: 100px;
			background: orange;
			text-align: center;
			cursor: pointer;
		}
	</style>
</head>
<body>
<ul>
	<li>
		歌手 <input type="text" id='singer'>
		歌曲 <input type="text" id = 'song'>
		<button >添加</button>
	</li>
	<li>
		<span>歌手</span>
		<span>歌曲</span>
		<span class="caozuo">操作</span>
	</li>
	<li>
		<span>许嵩</span>
		<span>断桥残血</span>
		<span class="del">删除</span>
	</li>
	<li>
		<span>许嵩</span>
		<span>如约而至</span>
		<span class="del">删除</span>
	</li>
</ul>
<script type="text/javascript">
	//逻辑
	//首先获取他爹
	let ul = document.querySelector('ul')
	// console.log(ul)
	let singer = document.querySelector('#singer')
	let song = document.querySelector('#song')
	let btn = document.querySelector('button')

	// 获取删除
	let del = document.querySelectorAll('.del')
	for(let i = 0;i<del.length;i++){
		del[i].onclick = function(){
			this.parentNode.remove()
		}
	}


	// 添加
	btn.onclick = function(){

		if(singer.value == ''|| song.value == ''){
			alert('不能为空')
		}else{

		// console.log(11)
		//创建li标签
		let li = document.createElement('li')
		let span1 = document.createElement('span')
		let span2 = document.createElement('span')
		let span3 = document.createElement('span')

		span1.innerText = singer.value
		span2.innerText = song.value
		span3.innerText = '删除'
		span3.className = 'del'
		// 把span标签放到li标签里面
		li.appendChild(span1)
		li.appendChild(span2)
		li.appendChild(span3)

		//添加到li里面
		ul.appendChild(li)

		span3.onclick = function(){
			//删除节点
			this.parentNode.remove()
		}

		//数据清零
		singer.value = ''
		song.value = ''
	}
}
	//删除

</script>
</body>
</html>